@extends('layouts.layouts')
@section('title')
    <title>后台首页</title>
@endsection
@section('content')
    <style type="text/css">
        .list-info li span{
            font-size:16px;
        }
    </style>
    <link rel="stylesheet" href="/lib/layer/theme/default/layer.css"/>
    <script type="text/javascript" src="/lib/layer/layer.js"></script>
    <div class="content">
        <div class="header">
            <ul class="breadcrumb">
                <li><a href="/course/list">课程管理</a></li>
                <li class="active">课程详情</li>
            </ul>
        </div>
        <div class="main-content">
            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">课程栏目</div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="panel-body">
                                    <ul class="list-unstyled list-info">
                                <li>
                                    <span>课程标题:</span>
                                    {{$courseClass->title}}
                                </li>
                                <li>

                                    <span>课程分类:&nbsp;&nbsp;</span>
                                    @if($courseClass->courseType)                                                   {{$courseClass->courseType->title}}
                                    @endif
                                </li>
                                <li>

                                    <span>是否付费:&nbsp;&nbsp;</span>
                                    {{$courseClass->is_free==0?'免费':'付费'}}
                                </li>
                                <li>
                                    <span>价格:&nbsp;&nbsp;</span>
                                    {{$courseClass->price}}
                                </li>
                                <li>
                                    <span>导师:&nbsp;&nbsp;</span>
                                    @if($courseClass->author)                                                       {{$courseClass->author->name}}
                                    @endif
                                </li>
                                <li>
                                    <span class="">课程数:&nbsp;&nbsp;</span>{{$courseClass->getCourseCount()}}
                                </li>
                                <li>
                                    <span class="">阅读量:&nbsp;&nbsp;</span>{{$courseClass->views}}
                                </li>
                                <li>
                                    <span class="">评论量:&nbsp;&nbsp;</span>0
                                </li>
                                <li>
                                    <span class="">封面图:</span>
                                    <img style="width:100px;height:100px;" src="{{env('IMG_URL')}}{{$courseClass->cover_url}}"/>
                                </li>
                            </ul>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="panel-body">
                                    <ul class="list-unstyled list-info">

                                        <li>
                                            <span class="">说明图:&nbsp;&nbsp;</span>
                                            <img style="width:100px;height:100px;" src="{{env('IMG_URL')}}{{$courseClass->explain_url}}"/>
                                        </li>
                                        <li>
                                            <span class="">课程介绍:&nbsp;&nbsp;</span>
                                            <div style=" overflow:scroll; width:400px; height:400px;">
                                            <?php
                                                echo  htmlspecialchars_decode($courseClass->introduction);
                                            ?>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12 col-md-12">
                    <div class="panel panel-default">
                        <div class="panel-heading no-collapse">课程小节</div>
                        <table class="table table-bordered table-striped">
                            <tbody>
                                @foreach($courseClass->courseSection as $k => $section)

                                <?php
                                    $count = $section->getCourseNum();
                                ?>
                                <tr class="info">
                                    <th colspan ='3'>{{$sectionPinyin[$k]}}-{{$section->title}}</th>
                                    <th>
                                        <button onclick="changeSectionStatus(this)" data-id="{{$section->id}}" data-status="{{$section->state}}" class="btn {{$section->state==1?"btn-success":"btn-warning"}}">{{$section->state==1?"禁用":"启用"}}</button>
                                    </th>
                                </tr>
                                <tr>
                                    <th>|_视频标题</th>
                                    <th>|_视频地址</th>
                                    <th>|_是否直播</th>
                                    <th>|_操作</th>
                                </tr>
                                @foreach($section->course as $course)
                                    <tr>
                                        <td>{{$course->title}}</td>
                                        <td>{{$course->video_url}}</td>
                                        <td>{{$course->is_live?'是':'否'}}</td>
                                        <td>

                                            <button onclick="previewCourse(this)" data-value="{{$course->preview}}" data-id="{{$courseClass->id}}_{{$course->id}}" class="btn btn-primary">{{$course->preview==1?'取消试看':'试看'}}</button>
                                            <button onclick="changeStatus(this)" data-id="{{$course->id}}" data-status="{{$course->state}}" class="btn {{$course->state==1?"btn-success":"btn-warning"}}">{{$course->state==1?"禁用":"启用"}}</button>
                                            <button onclick="deleteCourse(this)" data-id="{{$course->id}}" class="btn btn-danger">删除</button><button class="btn btn-success" data-id="{{$course->id}}" data-toggle="modal"  onclick="playSetting(this)">播放设置</button>
                                        </td>
                                    </tr>
                                @endforeach
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
                </div>
                <div class="modal-body"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" onclick="addPlayCourse();" class="btn btn-primary">确认</button>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        function previewCourse(obj){
            var id = $(obj).attr('data-id');
            var _token = '{{csrf_token()}}';
            var preview = $(obj).attr('data-value');
            var previewArr = ['试看','取消试看'];

            if(preview == 1){
                preview = 0;
            }else{
                preview = 1;
            }
            var data = {id:id,preview:preview,_token:_token};
            $.ajax({
                type:'POST',
                data:data,
                dataType:'json',
                url:'/course/preview',
                success:function(data){
                    if(data.code == 0){
                        swal(data.message);
                        $(obj).text(previewArr[preview]);
                        $(obj).attr('data-value',preview);
                    }else{
                        swal(data.message);
                    }
                }
            });

        }
        function changeStatus(obj){
            var stateArr = ['启用','禁用'];
            var id = $(obj).attr('data-id');
            var state = $(obj).attr('data-status');
            if(state == 1){
                state = 0;
            }else{
                state = 1;
            }
            var _token = '{{csrf_token()}}';
            var data = {id:id,state:state,_token:_token};
            $.ajax({
                type:'POST',
                data:data,
                dataType:'json',
                url:'/course/changeState',
                success:function(data){
                    if(data.code == 0){
                        if(state == 1){
                            $(obj).removeClass('btn-warning').addClass('btn-success');
                        }else{
                            $(obj).removeClass('btn-success').addClass('btn-warning');
                        }
                        $(obj).text(stateArr[state]);
                        $(obj).attr('data-status',state);
                    }else{
                        swal(data.message);
                    }
                }
            });
        }
        function changeSectionStatus(obj){
            var stateArr = ['启用','禁用'];
            var id = $(obj).attr('data-id');
            var state = $(obj).attr('data-status');
            if(state == 1){
                state = 0;
            }else{
                state = 1;
            }
            var _token = '{{csrf_token()}}';
            var data = {id:id,state:state,_token:_token};
            $.ajax({
                type:'POST',
                data:data,
                dataType:'json',
                url:'/section/changeState',
                success:function(data){
                    if(data.code == 0){
                        if(state == 1){
                            $(obj).removeClass('btn-warning').addClass('btn-success');
                        }else{
                            $(obj).removeClass('btn-success').addClass('btn-warning');
                        }
                        $(obj).text(stateArr[state]);
                        $(obj).attr('data-status',state);
                    }else{
                        swal(data.message);
                    }
                }
            });
        }

        function deleteCourse(obj){
            var id = $(obj).attr('data-id');
            var _token = '{{csrf_token()}}';
            var data = {id:id,_token:_token};
            layer.confirm('确定删除吗？', {
                btn: ['是', '否'],
            }, function(index){
                $.ajax({
                    type:'POST',
                    data:data,
                    dataType:'json',
                    url:'/course/delete',
                    success:function(data){
                        if(data.code == 0){
                            layer.alert(data.message);
                            $(obj).parent().parent().remove();
                        }else{
                            layer.alert(data.message);
                        }
                    }
                });
                layer.close(index);
                return true;
            }, function(index){
                layer.close(index);
            });
        }
        function playSetting(obj){
            var id = $(obj).attr('data-id');
            var data = {id:id,_token:'{{csrf_token()}}'};
            $.ajax({
                data:data,
                url:'/course/live/show',
                type:"POST",
                dataType:"json",
                success:function(res){
                    if(res.code == 0){
                        $('#myModal .modal-body').html(res.body);
                        $('#myModal').modal('show');
                    }
                }

            });
//            $('#myModal').find('.sectionCourseId').val(id);
        }
        function addPlayCourse(){
            var startTime = $('#startTime').val();
            var endTime = $('#endTime').val();
            var isPlay = $('.isPlay:checked').val();
            var liveNumber = $('#live_number').val();
            var playTmie = $('#playTime').val();
            var id = $('.sectionCourseId').val();
            if(id == ''){
                swal('未选中课程');
                return false;
            }
            if(isPlay == 1){
                if(startTime == '' || endTime == ''){
                    swal('直播时间未设置');
                    return false;
                }
            }
            var _token = '{{csrf_token()}}';
            var data = {id:id,start:startTime,end:endTime,isPlay:isPlay,playTime:playTmie,_token:_token,live_number:liveNumber};

            $.ajax({
                url:'/course/live',
                type:'POST',
                data:data,
                dataType:'json',
                success:function(res){
                    if(res.code !=0){
                        swal('设置失败');
                    }else{
                        $('#myModal').modal('hide');
                        swal(res.message);
                        return res;
                    }
                }
            });
        }
    </script>
    <style type="text/css">
        .btn{
            background-image:none!important;
        }
        .btn-success , .btn-success:hover {
            color: #fff;
            background-color: #449d44;
            border-color: #398439;
        }
        .btn-warning , .btn-warning:hover {
            color: #fff;
            background-color: #ec971f;
            border-color: #d58512;
        }

        .btn-danger , .btn-danger:hover {
            color: #fff;
            background-color: #c9302c;
            border-color: #ac2925;
        }
    </style>
@endsection